* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.f {
  display: flex;
}
.fr {
  display: flex;
  flex-direction: row;
}
.fr-ac {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fr-as {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.fr-ae {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.fr-js {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.fr-jc {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.fr-je {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.fr-jsb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fr-jsa {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.fr-ac-jsb {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.fr-ac-jsa {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.fr-ae-jsb {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.fr-ac-jc {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.fr-as-jsb {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.fc {
  display: flex;
  flex-direction: column;
}
.fc-ac {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fc-ae {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.fc-jc {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fc-js {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.fc-as {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.fc-jsa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.fc-jsb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fc-ac-jc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fc-ac-jsb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.fc-ac-jsa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.fc-ae-jsb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.fc-as-jsa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}
.fc-as-jsb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.fc-as-jc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.frw {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.fw {
  display: flex;
  flex-wrap: wrap;
}
.fw-fc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.fw-fs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.fw-sb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fw-jc-ac {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.bold {
  font-weight: bold;
}
.bold-1 {
  font-weight: 100;
}
.bold-2 {
  font-weight: 200;
}
.bold-3 {
  font-weight: 300;
}
.bold-4 {
  font-weight: 400;
}
.bold-5 {
  font-weight: 500;
}
.bold-6 {
  font-weight: 600;
}
.bold-7 {
  font-weight: 700;
}
.bold-8 {
  font-weight: 800;
}
.bold-9 {
  font-weight: 900;
}
.border {
  border: 1px solid;
}
.t-c {
  text-align: center;
}
.t-l {
  text-align: left;
}
.t-r {
  text-align: right;
}
.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
.p-f {
  position: fixed;
}
.p-s {
  position: sticky;
}
.roll-width {
  &::-webkit-scrollbar {
    width: 6px;
    height: 12px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #c7c3c3;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #b3afaf;
  }
}
.red {
  color: red;
}
.green {
  color: green;
}
$boxButtom: 101;
$maxSize: 10; // 最大值（例如 10）
$step: 0.1; // 小数步长

$i: 0;

@for $i from 0 to $boxButtom {
  .radius-#{$i} {
    border-radius: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}
@while $i <= $boxButtom {
  $i-int: $i * 10; // 将小数乘以10，变成整数
  .fs-#{$i-int} {
    font-size: #{$i}rem;
  }
  $i: $i + $step; // 每次增加小数步长
}
@for $i from 1 to $boxButtom {
  .h-#{$i} {
    height: $i + 0%;
  }
}
@for $i from 1 to $boxButtom {
  .w-#{$i} {
    width: $i + 0%;
  }
}
@for $i from 1 to $boxButtom {
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}
@for $i from 1 to $boxButtom {
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
    box-sizing: border-box;
  }
}
@for $i from 1 to $boxButtom {
  .grid-#{$i} {
    display: grid;
    grid-template-columns: repeat(#{$i}, 1fr);
    gap: 10px;
    cursor: pointer;
  }
}

$ellipsis-max: 11;
@for $i from 0 to $ellipsis-max {
  .ellipsis-#{$i} {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: #{$i};
    overflow: hidden;
  }
}
